<template>
  <transition name="fade">
    <div class="siteDialog">
      <GeminiScrollbar style="height:100%">
        <div class="container">
          <div class="content">
            <slot></slot>
          </div>
        </div>
      </GeminiScrollbar>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'baseCom',
};
</script>

<style lang='less'>
  .siteDialog{
    z-index: 1000;
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    display: flex;
    justify-content: center;
    align-items:center;
    overflow-y: scroll;
    background-color: rgba(0,0,0,0.6);
    width: 100%;
    height: 100%;
    &::-webkit-scrollbar {
      display: none;
    }
    .gm-scrollbar .thumb {
      background-color: rgba(255, 255, 255, 0.514);
    }
    .container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      .content{
        position: absolute;
        background-color: #fff;
        margin-bottom: 60px;
        margin-top: 60px;
      }
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
